<template>
  <!-- 绿色保存按钮，放在最右边 -->
  <el-button
    type="success"
    @click="saveFile"
    class="save-button"
  >
    保存场景
  </el-button>
</template>

<script setup>
// 导入Vue的响应式API
import { ref } from 'vue'
// 导入Element Plus的消息提示组件
import { ElMessage } from 'element-plus'
// 导入文件API
import { createCzmlFile } from '@/api/files'

// 生成默认文件名的方法
const generateDefaultFilename = () => {
  // 获取当前日期时间作为文件名的一部分
  const now = new Date()
  const dateStr = `${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}`
  const timeStr = `${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`
  
  // 返回格式化的文件名
  return `场景_${dateStr}_${timeStr}`
}

// 保存文件的方法
const saveFile = async () => {
  try {
    // 获取当前场景信息
    const currentSceneStr = localStorage.getItem('currentScene')
    if (!currentSceneStr) {
      ElMessage.error('没有找到当前场景信息，请先创建或打开一个场景')
      return
    }
    
    const currentScene = JSON.parse(currentSceneStr)
    
    // 生成默认文件名
    const filename = currentScene.fileName 
      ? currentScene.fileName.replace('.czml', '') // 如果有现有文件名，去掉扩展名
      : generateDefaultFilename() // 否则生成新的默认文件名
    
    // 显示加载中的提示信息
    const loading = ElMessage.info({
      message: '正在保存场景，请稍候...',
      duration: 0
    })
    
    try {
      // 收集场景中的所有对象数据
      const sceneData = {
        // 初始视角数据
        initialViewpoint: currentScene.initialViewpoint || {},
        // 初始视角表单数据 - 确保无损转换
        initialViewpointFormData: currentScene.initialViewpoint || {},
        // 收集卫星数据 - 确保每个卫星对象都有formData字段
        satellites: JSON.parse(localStorage.getItem('satellites') || '[]').map(satellite => {
          // 确保每个卫星对象都有formData字段，实现无损双向转换
          if (!satellite.formData) {
            satellite.formData = { ...satellite };
          }
          return satellite;
        }),
        // 收集地面站数据 - 确保每个地面站对象都有formData字段
        groundStations: JSON.parse(localStorage.getItem('groundStations') || '[]').map(station => {
          // 确保每个地面站对象都有formData字段，实现无损双向转换
          if (!station.formData) {
            station.formData = { ...station };
          }
          return station;
        }),
        // 收集区域目标数据 - 确保每个区域目标对象都有formData字段
        areaTargets: JSON.parse(localStorage.getItem('areaTargets') || '[]').map(target => {
          // 确保每个区域目标对象都有formData字段，实现无损双向转换
          if (!target.formData) {
            target.formData = { ...target };
          }
          return target;
        }),
        // 收集点目标数据 - 确保每个点目标对象都有formData字段
        pointTargets: JSON.parse(localStorage.getItem('pointTargets') || '[]').map(target => {
          // 确保每个点目标对象都有formData字段，实现无损双向转换
          if (!target.formData) {
            target.formData = { ...target };
          }
          return target;
        }),
        // 收集载荷数据 - 确保每个载荷对象都有formData字段
        payloads: JSON.parse(localStorage.getItem('payloads') || '[]').map(payload => {
          // 确保每个载荷对象都有formData字段，实现无损双向转换
          if (!payload.formData) {
            payload.formData = { ...payload };
          }
          return payload;
        })
      }
      
      console.log('保存场景数据:', sceneData)
      
      // 创建CZML文件并上传到后端
      const response = await createCzmlFile(filename, sceneData)
      loading.close() // 关闭加载提示
      
      // 处理响应
      if (response && response.code === 0) {
        ElMessage.success('场景保存成功')
        
        // 更新localStorage中的场景信息
        currentScene.fileName = `${filename}.czml`
        currentScene.updateTime = new Date().toISOString()
        
        // 如果响应中包含文件ID，则更新场景ID
        if (response.data && response.data.fileId) {
          currentScene.fileId = response.data.fileId
          // 单独存储sceneId，以便后续操作可以更可靠地获取
          localStorage.setItem('sceneId', currentScene.fileId.toString())
          console.log('更新场景ID到localStorage:', currentScene.fileId)
        }
        
        localStorage.setItem('currentScene', JSON.stringify(currentScene))
      } else {
        console.error('保存场景API响应:', response)
        ElMessage.error(response?.data || response?.msg || '保存失败，请检查网络连接')
      }
    } catch (innerError) {
      loading.close()
      throw innerError // 抛出内部错误供外层捕获
    }
  } catch (error) {
    console.error('保存场景时出错:', error)
    ElMessage.error('保存场景失败: ' + (error.message || '未知错误'))
  }
}

// 不再需要show方法，因为按钮始终可见
</script>

<style scoped>
.save-button {
  /* 确保按钮位于左下角 */
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 100;
}
</style>